<script lang="ts" setup>
  import { ref, toRefs } from 'vue';
import { changeSubscribe } from '/@/api/community_type';
import type { CommunityRecord } from '/@/api/model/community_typeModel';

 const props = withDefaults(
    defineProps<{
      data: CommunityRecord;
    }>(),
    {},
  );
  const followLoading = ref(false);
  const { data } = toRefs(props);
 
  
  const isFollowing = ref(data.value.is_following);
  console.log(isFollowing);
  
  const getSubscribe = async (data: CommunityRecord) => {
    followLoading.value = true;
    console.log(data.is_following);
    await changeSubscribe(data.id, data.is_following);

    isFollowing.value = !isFollowing.value;

    followLoading.value = false;
  };
</script>
<template>
  
  <div class="mb-[10px]">
    <a-space wrap>
      <img class="w-[72px] h-[72px]" :src="data?.logo" />
      <div>
        <div>{{ data?.name }}</div>
        <div class="text-[#8A919F] text-[12px]"
          >{{ data.focus_num || Math.floor(Math.random() * 101) }}星友 · 222星点</div
        >
        <a-button
          type="primary"
          size="small"
          @click="getSubscribe(data)"
          :loading="followLoading"
          >{{ isFollowing ? '已关注' : '关注' }}</a-button
        >
      </div>
    </a-space>
  </div>
</template>
